<template>
    <div>
        <div style="display: flex;justify-content: center; margin-top: 10px">
            <el-input v-model="keywords" placeholder="通过用户名搜索用户..." prefix-icon="el-icon-search"
                      style="width: 400px;margin-right: 10px" @keydown.enter.native="doSearch"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
        </div>
        <div class="admin-container">
            <el-card class="admin-card" v-for="(admin,index) in admins" :key="index">
                <div slot="header" class="clearfix">
                    <span>{{ admin.name }}</span>
                    <el-button style="float: right; padding: 3px 0; color: red" type="text"
                               icon="el-icon-delete" @click="deleteAdmin(admin)"></el-button>
                </div>
                <div>
                    <div class="img-container">
                        <img :src="admin.userFace" :alt="admin.name" :title="admin.name"
                             class="userface-img">
                    </div>
                </div>
                <div class="userinfo-container">
                    <div>用户名：{{ admin.name }}</div>
                    <div>电话号码：{{ admin.phone }}</div>
                    <div>手机号码：{{ admin.telephone }}</div>
                    <div>地址：{{ admin.address }}</div>
                    <div>用户状态：
                        <el-switch
                            v-model="admin.enabled"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="enabledChange(admin)"
                            active-text="启用"
                            inactive-text="禁用">
                        </el-switch>
                        <div>
                            用户角色：
                            <el-tag style="margin-right: 4px" type="success" v-for="(role, indexj) in admin.roles"
                                    :key="indexj">{{ role.nameZh }}
                            </el-tag>
                            <el-popover
                                placement="right"
                                title="角色列表"
                                width="200"
                                @show="showPop(admin)"
                                @hide="hidePop(admin)"
                                trigger="click">

                                <el-select v-model="selectedRoles" multiple placeholder="请选择">
                                    <el-option
                                        v-for="(r,index) in allRoles"
                                        :key="index"
                                        :label="r.nameZh"
                                        :value="r.id">
                                    </el-option>
                                </el-select>
                                <el-button slot="reference" type="text" icon="el-icon-more"></el-button>
                            </el-popover>
                        </div>

                        <div>
                            备注：{{ admin.remark }}
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

    </div>
</template>

<script>
export default {
    name: "SysAdmin",
    data() {
        return {
            admins: [],
            keywords: '',
            allRoles: [],
            selectedRoles: []
        }
    },
    mounted() {
        this.initAdmis();
    },
    methods: {
        hidePop(admin) {
            let roles = [];
            Object.assign(roles, admin.roles);//roles原角色数组
            let flag = false;
            if (roles.length != this.selectedRoles.length) {
                flag = true;
            } else {
                //校验是否相同
                let cnt = 0;
                for (let i = 0; i < roles.length; i++) {
                    for (let j = 0; j < this.selectedRoles.length; j++) {
                        if (roles[i].id == this.selectedRoles[j]) {
                            cnt++;
                            break;
                        }
                    }
                }
                //原来的角色新选择的不完全匹配
                if (cnt != roles.length) {
                    flag = true;
                }
            }
            if (flag) {
                let url = '/system/admin/roles?adminId=' + admin.id;
                this.selectedRoles.forEach(sr => {
                    url += '&rids=' + sr;
                });
                this.putRequest(url).then(resp => {
                    if (resp) {
                        this.initAdmis();
                    }
                });
            }
        },
        showPop(admin) {
            this.initAllRoles();
            let roles = admin.roles;
            //获取已选择的role的id
            this.selectedRoles = [];
            roles.forEach(r => {
                this.selectedRoles.push(r.id);
            });
        },
        initAllRoles() {
            this.getRequest('/system/admin/roles').then(resp => {
                if (resp) {
                    this.allRoles = resp;
                }
            })
        },
        enabledChange(admin) {
            this.putRequest('/system/admin/', admin).then(resp => {
                if (resp) {
                    this.initAdmis();
                }
            })
        },
        deleteAdmin(admin) {
            this.$confirm('此操作将永久删除该【' + admin.name + '】操作员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/admin/' + admin.id).then(resp => {
                    if (resp) {
                        this.initAdmis();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        doSearch() {
            this.initAdmis();
        },
        initAdmis() {
            this.getRequest('/system/admin/?keywords=' + this.keywords).then(resp => {
                if (resp) {
                    this.admins = resp;
                }
            })
        }
    }
}
</script>

<style>
.admin-card {
    width: 350px;
    margin-bottom: 20px;
}

.admin-container {
    display: flex;
    margin-top: 10px;
    justify-content: space-around;
    flex-wrap: wrap;
}

.userface-img {
    width: 72px;
    height: 72px;
    border-radius: 72px;
}

.img-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.userinfo-container {
    font-size: 12px;
    color: #409eff;
}
</style>
